<template>
  <div class="main">
    <div id="app">

      <!--导航栏-->
      <Header></Header>
      <div style="height: 1500px;">
        <!--轮播图-->
        <div class="lun">
          <Carousel autoplay  height="266px">
            <Carousel-item >
              <div class="demo-carousel" style="width: 100%;height: 500px;" >
                <img style="object-fit:contain;" src="../assets/banner/banner01.jpg" alt="">
              </div>
            </Carousel-item>
            <Carousel-item>
              <div class="demo-carousel">
                <img style="object-fit:contain;" src="../assets/banner/banner02.jpg" alt="">
              </div>
            </Carousel-item>
            <Carousel-item>
              <div class="demo-carousel">
                <img style="background-size: cover" src="../assets/banner/banner03.jpg" alt="">
              </div>
            </Carousel-item>
            <Carousel-item>
              <div class="demo-carousel">
                <img src="../assets/banner/banner04.jpg" alt="">
              </div>
            </Carousel-item>
            <Carousel-item>
              <div class="demo-carousel">
                <img src="../assets/banner/banner05.jpg" alt="">
              </div>
            </Carousel-item>
            <Carousel-item>
              <div class="demo-carousel" >
                <img  src="../assets/banner/banner06.jpg" alt="">
              </div>
            </Carousel-item>
          </Carousel>
        </div>
        <!--车型推荐-->
        <div class="car_class" style="margin-top: 30px">
          <div class="title_car">
              <div class="title_a">
                <span>热门车型推荐</span>
              </div>
              <div class="title_b" style="margin-top: 10px;margin-bottom: 20px">
                <span>精选用户推荐最受好评的热门车型</span>
              </div>

            <!--车辆推荐-->
            <div class="title_list" style="width: 1200px;height: 650px;margin: auto">
              <!--left-->
                <img src="../assets/tuijian.png" style="width: 200px;float: left;position:absolute;margin-top: 400px;margin-left: 5px" alt="">
                <div class="car_1" style="background-color:#f9f9fb;margin-left: 6px;height:600px;width: 590px;display: inline-block">
                  <img src="../assets/car/car_1.png" style="float:left;width: 588px;height: 423px;" alt="">
                  <div class="title" style="float: left">
                    <span style="height: 60px;font-size: 25px ;color: black;position: absolute;margin-left: 40px;margin-top: 40px">2021梅赛德斯奔驰</span>
                    <span style="float:left;font-size: 16px;color: #686876;margin-top: 90px;margin-left: 40px;">1.4T自动 | 三厢5座</span>
                  </div>
                  <div class="btn_bac" style="float: right;height: 70px;width: 160px;margin-top: 80px;margin-right: 20px">
                    <a href="" style="position: absolute;margin-top: 15px;margin-left: 40px;color: white;font-size: 15px" >立即查看 ></a>
                    <img src="../assets/btn_bac.png" style="height: 70px;width: 160px;" alt="">
                  </div>
                </div>
              <!--right-->
                <div style="width: 600px;height: 600px;display: inline-block">
                  <!--car1-->
                  <div class="car_1" style="float: right;width: 300px;height:300px;">
                    <div class="t_1" style="width: 280px;height: 280px;background-color: #f4f4fa;margin-left: 10px;margin-top: 10px">
                      <img src="../assets/title_2.png" style="width: 100px;height: 20px;float: left;margin-left: 10px;margin-top: 20px" alt="">
                      <img src="../assets/car/car_3.png" style="width: 260px;height: 150px" alt=""><br><br>
                      <span style="font-size: 1.3em;margin-left: 20px;">2021沃尔沃S900</span>
                      <img src="../assets/look_btn.png" style="position: absolute;width: 120px;height: 20px;border-top: 10px;margin-left: 20px" alt="">
                      <a href="" style="position: absolute;margin-top: 1px;margin-left: 55px;color: black;font-size: 10px">立即查看></a>
                      <br>
                      <span style="font-size: 0.5em;margin-left: 20px;margin-right: 20px">
                        车友推荐度
                      </span>
                        <Rate disabled v-model="valueDisabled" ></Rate>
                    </div>
                  </div>
                  <!--car2-->
                  <div class="car_2" style="float: right;width: 300px;height:300px;">
                    <div class="t_2" style="width: 280px;height: 280px;background-color: #f4f4fa;margin-left: 10px;margin-top: 10px">
                      <img src="../assets/title_2.png" style="width: 100px;height: 20px;float: left;margin-left: 10px;margin-top: 20px" alt="">
                      <img src="../assets/car/car_2.png" style="width: 260px;height: 150px" alt=""><br><br>
                      <span style="font-size: 1.3em;margin-left: 20px;">宝沃BX7四驱</span>
                      <img src="../assets/look_btn.png" style="position: absolute;width: 120px;height: 20px;border-top: 10px;margin-left: 45px" alt="">
                      <a href="" style="position: absolute;margin-top: 1px;margin-left: 80px;color: black;font-size: 10px">立即查看></a>
                      <br>
                      <span style="font-size: 0.5em;margin-left: 20px;margin-right: 20px">
                        车友推荐度
                      </span>
                      <Rate disabled v-model="valueDisabled" ></Rate>
                    </div>
                  </div>
                  <!--car3-->
                  <div class="car_3" style="float: right;width: 300px;height:300px;">
                    <div class="t_3" style="width: 280px;height: 280px;background-color: #f4f4fa;margin-left: 10px;margin-top: 10px">
<!--                   <img src="../assets/title_2.png" style="width: 100px;height: 20px;float: left;margin-left: 10px;margin-top: 20px" alt="">-->
                      <br>
                      <img src="../assets/car/car_5.png" style="width: 260px;height: 150px" alt=""><br><br>
                      <span style="font-size: 1.3em;margin-left: 20px;">奥迪A6</span>
                      <img src="../assets/look_btn.png" style="position: absolute;width: 120px;height: 20px;border-top: 10px;margin-left: 90px" alt="">
                      <a href="" style="position: absolute;margin-top: 1px;margin-left: 125px;color: black;font-size: 10px">立即查看></a>
                      <br>
                      <span style="font-size: 0.5em;margin-left: 20px;margin-right: 20px">
                        车友推荐度
                      </span>
                      <Rate disabled v-model="valueDisabled" ></Rate>
                    </div>
                  </div>
                  <!--car4-->
                  <div class="car_4" style="float: right;width: 300px;height:300px;">
                    <div class="t_4" style="width: 280px;height: 280px;background-color: #f4f4fa;margin-left: 10px;margin-top: 10px">
<!--                      <img src="../assets/title_2.png" style="width: 100px;height: 20px;float: left;margin-left: 10px;margin-top: 20px" alt="">-->

                      <br>
                      <img src="../assets/car/car_4.png" style="width: 260px;height: 150px" alt=""><br><br>
                      <span style="font-size: 1.3em;margin-left: 20px;">2021别克GL8</span>
                      <img src="../assets/look_btn.png" style="position: absolute;width: 120px;height: 20px;border-top: 10px;margin-left: 40px" alt="">
                      <a href="" style="position: absolute;margin-top: 1px;margin-left: 90px;color: black;font-size: 10px">立即查看></a>
                      <br>
                      <span style="font-size: 0.5em;margin-left: 20px;margin-right: 20px">
                        车友推荐度
                      </span>
                      <Rate disabled v-model="valueDisabled" ></Rate>
                    </div>
                  </div>
                </div>

            </div>


          </div>
        </div>
        <!--高德地图-->
        <div class="home-map-title">营业网点</div>
        <div class="home-map-tips">全国2800+门店为您提供安全出行服务</div>
        <div class="amap-wrapper" style="margin:auto;height: 600px;width: 1100px;">
          <el-amap class="amap-box" :center="[112.979352788,28.2134782309]"  :viewMode="'3D'" :vid="'amap-vue'"></el-amap>
        </div>
        <!--question-->
        <div class="question"
             style="background: url(https://cars.zuchecdn.com/static/static-img/questionBg.png) center center / cover no-repeat;margin-top: 60px">
          <div class="question-title">租车Q&amp;A</div>
          <div class="question-subtitle">每一个阶段，都值得留下美好时刻</div>
          <div class="question-content">
            <div class="question-content-item">
              <div class="car-item">
                <div class="car-item-header">
                  <div class="car-item-header-icon">Q1</div>
                  <div class="car-item-header-title">租车需要哪些证件？</div>
                </div>
                <div class="car-item-content">
                  <div>身份证：大陆用户驾驶员二代身份证，年满18周岁，有效期需 超过当次租期一个月以上。</div>
                  <div>驾驶证：本人国内有效驾驶证（正副本），有效期需超过当次租期一个月以上。</div>
                  <div>港澳台客户准备澳港内地通行证或台湾居民来往大陆通行证，有效期超过当次租期两个月以上。</div>
                  <div>外籍客户提供护照，有效期超过当次租期两个月以上。</div>
                </div>
              </div>
              <div class="car-item">
                <div class="car-item-header">
                  <div class="car-item-header-icon">Q4</div>
                  <div class="car-item-header-title">可以开哪些发票?</div>
                </div>
                <div class="car-item-content">
                  <div>国内租订单还车结算后以订单为单位，为您开具增值税发票；支持电子发票和纸质发票。</div>
                </div>
              </div>
            </div>
            <div class="question-content-item">
              <div class="car-item">
                <div class="car-item-header">
                  <div class="car-item-header-icon">Q2</div>
                  <div class="car-item-header-title">有哪些网络预订方式？</div>
                </div>
                <div class="car-item-content">
                  <div>App：通过应用市场下载神州租车App进行预订。</div>
                  <div>小程序：在微信和支付宝平台搜索“神州租车”关键词找到小程序进行预订。</div>
                  <div>触屏版：浏览器中输入m.zuche.com预订。</div>
                </div>
              </div>
              <div class="car-item">
                <div class="car-item-header">
                  <div class="car-item-header-icon">Q5</div>
                  <div class="car-item-header-title">租车费用有哪些？</div>
                </div>
                <div class="car-item-content">
                  <div>必缴费用包括：车辆租赁及服务费、基础服务费、车辆整备费共三项。</div>
                  <div>其他费用包括：送车上门服务费、上门取车服务费、跨网点还车服务费、异地还车服务费、加油服务费、超时服务费等。</div>
                </div>
              </div>
            </div>
            <div class="question-content-item">
              <div class="car-item">
                <div class="car-item-header">
                  <div class="car-item-header-icon">Q3</div>
                  <div class="car-item-header-title">有哪些预订流程？</div>
                </div>
                <div class="car-item-content">
                  <div>只需四步即可完成预订。</div>
                  <div>第1步：确定需要取还的地址和时间。</div>
                  <div>第2步：选择取还的网点和车型。</div>
                  <div>第3步：选择承租人。</div>
                  <div>第4步：订单确认，完成预订。</div>
                </div>
              </div>
              <div class="car-item">
                <div class="car-item-header">
                  <div class="car-item-header-icon">Q6</div>
                  <div class="car-item-header-title">可以选择哪些出行保障？</div>
                </div>
                <div class="car-item-content">
                  <div style="margin-bottom: 22px;">我们已为您提供基础服务保障，同时您也可以购买尊享服务、尊享百万服务、尊享驾乘守护和全程无忧，让您的出行更安心。</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--footer-->
        <Footer></Footer>
      </div>
    </div>
  </div>
</template>

<script>
  import Footer from "../components/Footer";
  import Header from "../components/Header";
  export default {
    data () {
      return {
        valueDisabled: 5,
        height:'',
      }
    },
    components:{
      Footer,
      Header
    }
  }
</script>

<style scoped>
  .home-map-tips {
    margin-left: 650px;
    margin-bottom: 32px;
    height: 24px;
    font-size: 14px;
    color: #686876;
    line-height: 24px;
  }
  .home-map-title {
    margin-left: 690px;
    margin-bottom: 10px;
    height: 40px;
    font-size: 32px;
    color: #171721;
    line-height: 40px;
  }
  /*question*/
  .car-item-header-title {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #171721;
  }
  .car-item-header-icon {
    width: 30px;
    height: 20px;
    background: #fabe00;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    color: #171721;
    line-height: 20px;
    text-align: center;
    font-family: Arial;
  }
  .car-item-content {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 400;
    color: #171721;
    line-height: 22px;
  }
  .car-item-header {
    box-sizing: border-box;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
  }
  .car-item {
    width: 100%;
    padding: 0 20px;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 20px;
  }
  .question-content-item {
    width: 380px;
    margin: 0 15px;
  }
  .question-content {
    display: flex;
    margin-top: 36px;
  }
  .question-subtitle {
    height: 24px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #686876;
    line-height: 24px;
  }
  .question-title {
    height: 40px;
    font-size: 32px;
    font-weight: 400;
    color: #171721;
    line-height: 40px;
    letter-spacing: 2px;
  }
  .question {
    padding: 55px 0 37px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title_b span{
    background-size: cover;
    margin-left: 645px;
    height: 24px;
    font-weight: 400;letter-spacing: 2px;
    font-size: 14px;
    color: #686876;
    line-height: 24px;
  }

  .title_a span{
    margin-left: 666px;
    font-weight: 400;
    letter-spacing: 2px;height: 40px;
    font-size: 32px;
    color: #171721;
    line-height: 40px;
  }
  .lun{
  height: 266px;
  }
  .demo-carousel img{
    width: 100%;
   object-fit:scale-down;

  }


</style>
